<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>记账了</title>
<link rel="stylesheet" href="resources/css/style.css" type="text/css"
	media="all" />
<link href="resources/css/demo.css" type="text/css" rel="stylesheet" />
<link href="resources/css/custom.css" rel="stylesheet" />
<script src="resources/js/jquery-1.10.2.js"></script>
<script src="resources/js/jquery-ui-1.10.4.custom.js"></script>

<script type="text/javascript">4
function altRows(id){
    if(document.getElementsByTagName){  
        
        var table = document.getElementById(id);  
        var rows = table.getElementsByTagName("tr"); 
         
        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "evenrowcolor";
            }else{
                rows[i].className = "oddrowcolor";
            }      
        }
    }
}

window.onload=function(){
    altRows('alternatecolor');
}
$(document).ready(function(){
	if(${payType eq "type1"}){
		$("#type1").attr("checked","checked");
	}else{
		$("#type2").attr("checked","checked");
	}
	$("radiobutton").click(function(){
		var val = $(this).val();
		alert(val);
	});
	$("[href='#del']").click(function() {
		if(confirm("确定要删除该账户吗？"))
		{
			var url = "/deleteAccount?id="+$(this).attr("name");
			window.location.href=url;
		}
	});
});
</script>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.action {
	padding-left: 450px;
}

.p1 {
	color: red;
	font-size: 16px;
}

.c1 {
	color: black;
	font-size: 16px;
	line-height: 2.5em;
	padding-left: 300px;
	width: 150px;
}
.c2 {
	color: black;
	font-size: 20px;
	line-height: 2.5em;
}

.c3 {
	color: black;
	font-size: 20px;
	padding-left: 50px;
}

.a1 {
	color: black;
	font-size: 25px;
	line-height: 2.5em;
	cursor: pointer;
	background-color: #EEEEEE;
}

.bton {
	color: block;
	font-size: 15px;
	margin-top: 20px;
	margin-left: 450px;
	cursor: pointer;
	background-color: #99AAff;
}
table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:13px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}
table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
.oddrowcolor{
    background-color:#d4e3e5;
}
.evenrowcolor{
    background-color:#c3dde0;
}
</style>
</head>
<body>
<div id="dialog" title="删除账户?">
	<p class="validateTips">删除不可恢复，确认删除么？</p>
</div>
<div id="dialog-form" title="创建新的账户">
	<p class="validateTips">请输入新的账号和充值金额</p>

	<form:form commandName="financialAccount" action="createAccount" id="thisForm">
	<fieldset>
		<label for="account">账号</label>
		<form:input path="account" id="account" class="text ui-widget-content ui-corner-all"/>
		<label for="balance">充值金额</label>
		<form:input path="balance" id="balance" class="text ui-widget-content ui-corner-all"/>
		<label for="accountType">账户类型</label>
		<form:select path="accountType" id="accountType" style="width: 98%;padding: 0.4em;margin-bottom: 12px;" class="ui-widget-content">
			<form:option value="现金账户"></form:option>
			<form:option value="银行账户"></form:option>
			<form:option value="虚拟账户"></form:option>
			<form:option value="负债"></form:option>
		</form:select>
		<label for="summary">备注</label>
		<form:textarea path="summary" id="summary"  style="width: 98%;" class="ui-widget-content"></form:textarea>
	</fieldset>
	</form:form>
</div>
<div class="main">
	<div class="wraper">
		<h2 align="left">
			<span class="green" >&nbsp;&nbsp;账户信息</span>
			<span class="c1" style="diplay:inline;padding-left:600px;">
					<img width="16" height="16" src="resources/images/tab/22.gif">
					<a href="javascript:void(0)" id="create-user">添加账户</a>
			</span>
		</h2>
			<table class="altrowstable" id="alternatecolor">
				<tr>
				    <th>账户账号</th><th>账户余额</th><th>账户类型</th><th>基本操作</th>
				</tr>
				<c:forEach items="${list }" var="account">
				<tr>
				    <td>${account.account }</td>
				    <td>${account.balance }</td>
				    <td>${account.accountType }</td>
				    <td width="30%">
					    <span class="STYLE4">&nbsp;&nbsp;&nbsp;&nbsp;
							<img width="16" height="16" src="resources/images/tab/33.gif">
							<a href="#del" name="${account.id }">删除</a>
						</span>
					</td>
				</tr>
				</c:forEach>
			</table>
		<h2>
			<br />
		</h2>
	</div>
</div>
</body>
<script type="text/javascript">
$(function() {
	var account = $( "#account" ),
		balance = $( "#balance" ),
		allFields = $( [] ).add( account ).add( balance ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips.text( t ).addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {return true;}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {return true;}
	}

	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 400,
		width: 350,
		modal: true,
		buttons: {
			Save: function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( account, "account", 2, 20 );
				bValid = bValid && checkLength( balance, "balance", 0, 10 );

				bValid = bValid && checkRegexp( account, /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, "account field only allow : a-z 0-9 cheinese" );
				bValid = bValid && checkRegexp( balance, /^([0-9a-zA-Z])+$/, "balance field only allow : a-z 0-9" );

				if ( bValid ) {
					$("#thisForm").submit();
					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
	$( "#create-user" ).click(function() {
			$( "#dialog-form" ).dialog( "open" );
	});
});
</script>
</html>
